<div class="sim">
  <div class="wallpaper" [ngStyle]="{height: simThemeHeight + 'px'}">
    <div class="bg">
      <nz-carousel
        nzEffect="scrollx"
        [nzAutoPlay]="simThemeAutoplay"
        [nzDots]="simThemeImages.length > 1"
        [nzEnableSwipe]="simThemeImages.length > 1"
        [nzAutoPlaySpeed]="5000"
      >
        <div
          class="bg-item"
          nz-carousel-content
          *ngFor="let item of simThemeImages"
          [ngStyle]="{ 'background-image': 'url(' + item.src + ')' }"
          (click)="handleJumpUrl(item)"
        >
        </div>
      </nz-carousel>
    </div>

    <div class="bar">
      <h1 class="title dark-title">{{ title }}</h1>
      <h2 class="description dark-text-active" [innerHTML]="description"></h2>
      <app-search-engine></app-search-engine>
    </div>
  </div>

  <nav class="top-nav user-select-none dark-border-color">
    <a 
      *ngFor="let item of websiteList; let i = index;" 
      [class.active]="page === i" 
      [class.dark-text-active]="page === i" 
      [class.remove]="!isLogin && item.ownVisible"
      class="ripple-btn dark-text"
      (click)="handleCilckTopNav(i)" 
    >
      {{ item.title }}
    </a>
  </nav>

  <div class="wrapper">
    <nav class="sidebar dark-bg" id="sidebar">
      <div *ngIf="websiteList[page]?.nav?.length > 0">
        <div 
          *ngFor="let item of websiteList[page].nav; let i = index" 
          (click)="handleSidebarNav(i)" 
          [class.active]="id === i" 
          [class.dark-item-active]="id === i" 
          [class.remove]="!isLogin && item.ownVisible"
          class="ripple-btn dark-text"
        >
          {{ item.title }}
        </div>
      </div>
    </nav>

    <aside class="site-box dark-bg">
      <div *ngIf="currentList.length > 0; else noData">
        <div *ngFor="let item of currentList; let i=index">
          <div class="nav-wrapper">
            <app-toolbar-title [dataSource]="item" (onCollapse)="onCollapse(item, i)" [index]="i"></app-toolbar-title>
  
            <div nz-row [nzGutter]="[16, 16]" [style.display]="item.collapsed ? 'none' : ''">
              <div
                class="gutter-row"
                nz-col
                [nzSpan]="8"
                *ngFor="let el of item.nav; let idx=index; let i=j"
                [class.remove]="!isLogin && el.ownVisible"
              >
                <app-card [dataSource]="el" [indexs]="[page, id, i, j]"></app-card>
              </div>
            </div>
          </div>
        </div>
      </div>

      <ng-template #noData>
        <app-no-data></app-no-data>
      </ng-template>
    </aside>
  </div>
</div>

<app-footer className="sim-footer"></app-footer>
<app-fixbar
  (onCollapse)="onCollapseAll()"
  [collapsed]="collapsed()"
>
</app-fixbar>

<div class="sim-bg dark-bg"></div>
